import { defineComponent, reactive, computed } from "vue";
import Applicant from "./Applicant/Applicant";
import Insured from "./Insured/Insured";
import styles from "./Insure.module.scss";
import _ from "lodash";
import { useStore as useInsureStore } from "@/store/insure";
import Paytype from "./Paytype/Paytype";
import Notify from "./Notify/Notify";
export default defineComponent({
  setup(props, { expose }) {
    const insureStore = useInsureStore();
    // 标题
    const Title = (titleProps: any) => (
      <div class={styles.title}>
        <div class={styles.count}>{titleProps.count}</div>
        <span>{titleProps.text}</span>
      </div>
    )

    const id_types = reactive({
      list: [
        {
          text: '身份证',
          value: '111',
        },
        {
          text: '外国人永久居留身份证',
          value: '553',
        }
      ],
      value: [] as any[],
      insured_idx: '' as any,
      isShow: false,
    })

    const areas = reactive({
      list: [] as any[],
      value: [] as any[],
      insured_idx: '' as any,
      isShow: false,
    })

    const places = reactive({
      list: [
        {
          name: '袁州区',
        },
        {
          name: '樟树市',
        },
        {
          name: '丰城市',
        },
        {
          name: '靖安县',
        },
        {
          name: '奉新县',
        },
        {
          name: '高安市',
        },
        {
          name: '上高县',
        },
        {
          name: '宜丰县',
        },
        {
          name: '铜鼓县',
        },
        {
          name: '万载县',
        },
        {
          name: '市本级',
        },
      ] as any[],
      value: [] as any[],
      insured_idx: '' as any,
      isShow: false,
    })

    const insuredDefault = {
      identity: '',
      name: '',
      id_type: '111',
      province_id: 1263,
      city_id: 1339,
      area_id: '',
      id_no: '',
      mobile: '',
      place: '',
    }

    const form = reactive({
      applicant: {
        name: '',
        id_type: '111',
        province_id: 1263,
        city_id: 1339,
        area_id: '',
        id_no: '',
        mobile: '',
      },
      insured: [] as any[],
      payType: 'sfypay',
      agree: false,
    })

    const total_price = computed(() => {
      return insureStore.state.price * form.insured.length;
    })

    // 添加被保人
    const insuredAdd = () => {
      let _insured = _.cloneDeep(insuredDefault);
      if (form.insured.every(x => x.identity !== '17')) {
        _insured.identity = '17';
      } else {
        _insured.identity = '22';
      }
      form.insured.push(_insured);
    }

    // 移除被保人
    const insuredRemove = (idx: number) => {
      form.insured.splice(idx, 1);
    }

    // 默认添加一条被保人
    insuredAdd();
    expose({
      total_price,
    })
    return () => (
      <div class={styles.insure}>
        <Title count={1} text="缴费人信息" />
        <Applicant form={form} id_types={id_types} areas={areas} />
        <Title count={2} text="被保险人信息" />
        <Insured form={form} id_types={id_types} areas={areas} places={places} onRemove={insuredRemove} />
        <div class={styles['insured-add']}>
          <button onClick={() => { insuredAdd() }}>添加被保险人</button>
        </div>
        <Title count={3} text="付款方式" />
        <Paytype form={form} />
        <Notify form={form} />
      </div>
    )
  }
})